<template>
  <div class="_text-a-r">
    <el-button
      type="primary"
      size="small"
      v-if="!isAllocation"
      @click="isAllocation = true"
      >分配</el-button
    >
    <el-button
      type="primary"
      size="small"
      v-if="isAllocation"
      @click="confirm()"
      >确认</el-button
    >
    <el-button
      type="primary"
      size="small"
      v-if="isAllocation"
      @click="isAllocation = false"
      >取消</el-button
    >
  </div>
  <div class="_flex _flex-dis-2">
    <el-checkbox-group v-model="resourceSelect">
      <template v-for="item in resourceList" :key="item.id">
        <el-checkbox class="_wrapper-x" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </template>
    </el-checkbox-group>
    <el-radio-group v-model="accountSelect" v-if="isAllocation">
      <template v-for="item in accountList" :key="item.id">
        <el-radio class="_wrapper-x" :label="item.id">{{
          item.account
        }}</el-radio>
      </template>
    </el-radio-group>
  </div>
</template>

<script>
import toolAction from "@/tool/http/tool-action";
const resourceAction = toolAction.init("common_resource");
const accountAction = toolAction.init("account");

export default {
  data() {
    return {
      resourceList: [],
      resourceSelect: [],
      accountList: [],
      accountSelect: undefined,
      isAllocation: false,
    };
  },
  watch: {
    accountSelect(newVal) {
      if (newVal) {
        toolAction
          .run("action-account-com-resource-allocation", newVal)
          .then((res) => {
            this.resourceSelect = res.map((item) => item.resource_id);
          });
      }
    },
  },
  async mounted() {
    this.resourceList = await resourceAction.list();
    this.accountList = await accountAction.list();
  },
  methods: {
    confirm() {
      toolAction
        .run(
          "action-account-com-resource-allocation",
          this.accountSelect,
          this.resourceSelect
        )
        .then(() => {
          this.$element.msg();
        });
    },
  },
};
</script>

<style></style>
